<template>
  <div class="app">
    <h3>{{ title }}</h3>
    <h4>{{ content }}</h4>
    <button @click="sendGet">测试</button>
    <hr />
    <about1 />
    <hr />
  </div>
</template>

<script>
import about1 from "./views/AboutView.vue";
// import axios from "axios";
import network from "./network";
// axios.defaults.baseURL = "https://api.muxiaoguo.cn";
// axios.defaults.timeout = 60000;

export default {
  components: {
    about1,
  },
  data() {
    return {
      content: "搞笑句子",
      title: "题目",
    };
  },
  // mounted(){},
  methods: {
    sendGet() {
      network({
        url: "/api/xiaohua",
        params: {
          api_key: "6c11166687d06443",
        },
      }).then((res) => {
        this.content = res.data.content;
        this.title = res.data.title;
      });
      // ====================== axios发送请求 =================================
      // axios
      //   .get("/api/xiaohua", {
      //     params: {
      //       api_key: "6c11166687d06443",
      //     },
      //   })
      //   .then(function (res) {
      //     console.log(res.data);
      //   })
      //   .catch(function (error) {
      //     console.log(error);
      //   });
      // ====================== axios.all方法 ============================
      // axios
      //   .all([
      //     axios.get("/api/xiaohua", {
      //       params: {
      //         api_key: "6c11166687d06443",
      //       },
      //     }),
      //     axios.get("/api/caihongpi?api_key=584ea9bef79ebaa9"),
      //   ])
      //   .then(
      //     axios.spread((res1, res2) => {
      //       console.log(42, res1.data);
      //       console.log(43, res2.data);
      //       // return res1.data.
      //     })
      //   );
    },
  },
};
</script>

<style>
.app {
  text-align: center;
}
</style>